<template>
  <div>
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="dataList"
      :options="options"
      :rowHandle="rowHandle"
      @case-deal="caseDeal"
      @process-img="processImg"
      @case-check="caseCheck"
      index-row
      selection-row
      @row-click="rowClick"
      @sort-change="sortChange"
      @selection-change="selectChange"
      :pagination="pagination"
      @pagination-current-change="pageChange">
      <div class="title" slot="header">
        <span class="text">案件办理</span>
        <head-btns :add="add" :mod="mod" :del="del"/>
      </div>
    </d2-crud>
    <el-dialog
      title="案件审核记录"
      :visible.sync="examineVisible"
      width="50%">
      <el-timeline class="timeline">
        <el-timeline-item
          v-for="(examine, index) in examineData"
          :key="index"
          :timestamp="dateFormat(examine.approveDate)"  placement="top">
          <p  v-if="examine.approver" class="approver"><span>审批人：</span><span class="text">{{examine.approver}}</span></p>
          <p class="status"><span>审批批语：</span><span class="text">{{examine.status}}</span></p>
        </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="examineVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <process-img ref="processImg"></process-img>
  </div>
</template>
<script>
  import discretionApi from "@/api/system/discretion";
  import caseApi from "@/api/system/case";
  import utils from '@/assets/utils/zhzf-util';
  import dictCache from '@/assets/utils/cache-dict-util';
  import HeadBtns from "@/views/comps/zhzf/head-btns";
  import {mapState, mapMutations} from "vuex";
  import {frameInRoutes} from "@/router/routes";
  import layoutHeaderAside from "@/views/layout/header-aside";
  import tabPageMinxin from '@/assets/minxin/tag-page';
  import processImg from "@/views/case/detail/process-img"
  import tabPage from "@/views/case/execute/detail-info";
  export default {
    components: {HeadBtns, processImg},
    mixins: [tabPageMinxin],
    data() {
      return {
        dataList: [],
        examineVisible:false,
        examineData:[],
        columns: [
          { title: "案件编号", key: "caseAccess.caseNum",sortable:'true',width:200},
          { title: "立案地点", key: "caseAccess.fillingPlace", sortable:'true'},
          {
            title: "立案时间",
            key: "caseAccess.createTime",
            width:100,
            sortable:'true',
            formatter: (row, col, val) => {
              return utils.formatDts(val, "YYYY-MM-DD");
            }
          },
          { title: "立案机构", key: "caseAccess.organName",width:150,sortable:'true' },
          { title: "当事人", key: "caseAccess.party" ,width:80,sortable:'true'},
          {
            title: "执行类型",
            key: "caseAccess.caseTypeId",
            width:80,
            sortable:'true',
            formatter: (row, col, val) => {
              let dict = dictCache.getDataInfo("0048", val);
              return (dict && dict.name) || "一般程序";
            }
          },
          {
            title: "执法门类",
            key: "caseAccess.zfml",
            width:80,
            sortable:'true',
            formatter: (row, col, val) => {
              let dict = dictCache.getDataInfo("0055", val);
              return (dict && dict.name) || "道路运政";
            }
          },
          { title: "执法人", key: "tmp",width:80, sortable:'true'},
          { title: "当前环节", key: "caseAccess.linkName",width:80,sortable:'true'},
        //   formatter:(row,col,val)=>{
        //       let dict = dictCache.getDataInfo("0053", val);
        //       return (dict && dict.name) || "标准立案";
        //   }
          { title: "案件类型", key: "caseAccess.caseType",width:80,sortable:'true',formatter:(row,col,val)=>{
              let dict = dictCache.getDataInfo("0053", val);
              return (dict && dict.name) || "标准立案";
          } },
          { title: "案件状态", key: "caseAccess.caseStatus",width:80,sortable:'true',formatter:(row,col,val)=>{
              let dict = dictCache.getDataInfo("0053", val);
              return (dict && dict.name) || "标准立案";
          }  }
        ],
        rowHandle: {
          custom: [
            {text: '办理', emit: 'case-deal', style: "color:#409eff;text-decoration:underline;font-size:14px;"},
            {text: '流程', emit: 'process-img', style: "color:#409eff;text-decoration:underline;font-size:14px;"},
            {text: '审批历史', emit: 'case-check', style: "color:#409eff;text-decoration:underline;font-size:14px;"},
          ]
        },
        options: {
          stripe: true,
          highlightCurrentRow: true,
          height: utils.getPageheight(),
        },
        pagination: {
          currentPage: 1,
          pageSize: 20,
          total: 0
        },
        queryParam: {},
        selected: [],
      };
    },
    mounted() {
      this.initPage();
    },
    methods: {
      ...mapMutations({
        pageInit: "d2admin/page/init",
        headerSet: "d2admin/menu/headerSet"
      }),
      async initPage() {
        await this._fetchListData();
      },
      async _fetchListData() {
        let res = await caseApi.caseList({...this.pagination, taskDefinitionKey:"案件办理"});
        this.dataList = res.data.rows
        this.pagination.total = this.dataList.length;
      },
      pageChange(currentPage) {
        this.pagination.currentPage = currentPage;
        this._fetchListData();
      },
      sortChange(column,prop,order){//根据表头参数进行排序

      },
      rowClick(row) {
        this.$refs.d2Crud.$children[1].toggleRowSelection(row);
      },
      selectChange(selection) {
        this.selected = selection;
      },
      showDetail(row) {
        let pageTitle = "办理环节";
        let rpath = "case/handle/detail";
        let rname = "caseHandleDetail";
        this.addTabPage(pageTitle,rpath,rname,tabPage,{row:row})
      },
      async processImg({row}) {  //查看流程图
        window.event.stopPropagation(); //阻止冒泡
        let detail = {
          processInstanceId:row.processInstanceId,
          caseNo:row.caseAccess.caseNum
        }
        this.$refs.processImg.initPage(detail);
      },
      async caseCheck({row}){  //案件审核记录
        window.event.stopPropagation(); //阻止冒泡
        this.examineVisible = true;
        let resp = await caseApi.caseExamineHistory({id:row.caseAccess.caseAccessId})
        if(resp){
          // console.log(resp.data);
          this.examineData = resp.data;
          this.examineData.reverse();
        }
      },
      dateFormat(val){
        return utils.formatDts(val, "YYYY-MM-DD HH:mm:ss");
      },
      caseDeal({row}){
        this.showDetail(row);
      },
      add(rd) {
        this.showDetail();
      },
      mod(rd) {
        if (rd) {
          this.showDetail(rd.row);
        } else if (this.selected.length == 1) {
          this.showDetail(this.selected[0]);
        } else {
          utils.showTips('请选择一行数据');
          return;
        }
      },
      del(rd) {
        if (!rd && !this.selected.length) {
          utils.showTips('请选择要删除的数据', false);
          return;
        }
        let delIds = [];
        if (rd) {
          delIds = [rd.row.id];
        } else {
          this.selected.map(item => {
            delIds.push(item.id)
          });
        }

        this.$confirm("确认删除？", "确认信息", {
          distinguishCancelAndClose: true,
          confirmButtonText: "删除",
          cancelButtonText: "取消"
        }).then(() => {
          this.submitDel(delIds)
        });
      },
      async submitDel(ids) {
        await discretionApi.del(ids);
        await this.initPage();
      }
    }
  };
</script>

<style lang="scss">
  .timeline{
    max-height:600px;
    overflow: auto;
    .text{
      color:rgb(64, 158, 255)
    }
    .approver{
      margin-right:8px;
    }
  }
</style>
